<template>
    <div>
        <div class="over-flow">
            <div class="banner-welfare">
                <info-banner :bannerItems="raiseBannerItems"></info-banner>
            </div>
            <div class="top-right-right">
                <div class="progress-title">信用卡进度查询</div>
                <el-form :model="ruleForm2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="所属银行" prop="pass">
                        <el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号" prop="checkPass">
                        <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm2')">进度查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="qqqq">
            <div class="credit-list-com flex">
                <div class="left-contain">
                    <div class="content-title">热门提额信用卡</div>
                    <div class="www flex">
                        <credit-product :creditProData="i" v-for="i in raiseAmounthotCardData"></credit-product>
                    </div>
                </div>
            </div>
        </div>
        <div class="qqqq">
            <div class="content-title">热门提额信用卡</div>
            <div class="flex">
                <div class="weeeww">
                    <notice-list :indexfirstListData="raiseAmountList1Data"></notice-list>
                </div>
                <div class="weeeww">
                    <notice-list :indexfirstListData="raiseAmountList2Data"></notice-list>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import infoBanner from 'components/info-banner'
import creditProduct from "components/credit-product"
import noticeList from "components/notice-list"
import { raiseAmountCarouselFigure } from '@/common/js/raiseAmount/carouselFigure'
import { raiseAmounthotCard } from '@/common/js/raiseAmount/hotCard'
import { raiseAmountList1 } from '@/common/js/raiseAmount/list1'
import { raiseAmountList2 } from '@/common/js/raiseAmount/list2'
export default {
    data() {
        return {
            raiseBannerItems: [],
            raiseAmountList1Data: [],
            raiseAmountList2Data: [],
            raiseAmounthotCardData: {},
            ruleForm2: {}
        }
    },
    components: {
        infoBanner,
        creditProduct,
        noticeList
    },
    mounted() {
        this.raiseBannerItems = raiseAmountCarouselFigure
        this.raiseAmountList1Data = raiseAmountList1
        this.raiseAmountList2Data = raiseAmountList2
        this.raiseAmounthotCardData = raiseAmounthotCard
    }
}

</script>
<style scoped lang="less">
@import "../../common/less/variable.less";

.banner-welfare {
    width: 70%;
    float: left;
}

.top-right-right {
    float: left;
    width: 25%;
    border: 1px solid #DCDCDC;
    border-radius: 31px;
    margin-left: 20px;
    box-shadow: 6px 0px 6px #888888;
    .progress-title {
        width: 100%;
        text-align: center;
        font-size: 36px;
        margin: 40px 0;
    }
    .demo-ruleForm {
        margin-right: 45px;
    }
}

.over-flow {
    overflow: hidden;
}

.qqqq {
    margin-top: 30px;
    margin-bottom: 30px;
    .content-title {
        width: 100%;
        height: 40px;
        background: #DCDCDC;
    }
}

.credit-list-com {
    >div {
        &:first-child {
            width: 70%;
            margin-right: 10px;
            >.www {
                width: 100%;
                flex-wrap: wrap;
                flex-wrap: wrap;
                align-items: center;
                .flex {
                    width: 30%
                }
                margin-left: 8%;
            }
            .card-height {
                padding-bottom: 5px;
            }
        }

        &:last-child {
            width: 100%;
        }
    }
    .left-contain {
        border: 1px solid #DCDCDC;
    }
    .height80 {
        height: 85%;
    }
    .card-div {
        padding-right: 6%;
        &:last-child {
            padding-right: 0;
        }
    }
}

.banner {
    .width45 {
        width: 45% !important;
    }
    .width55 {
        width: 55% !important;
        .el-carousel__item h3 {
            color: #475669;
            font-size: 18px;
            opacity: 0.75;
            line-height: 300px;
            margin: 0;
        }

        .el-carousel__item:nth-child(2n) {
            background-color: #99a9bf;
        }

        .el-carousel__item:nth-child(2n+1) {
            background-color: #d3dce6;
        }
    }
}

.top-right {
    .top-right-left {
        >div {
            >div {
                >img {
                    width: 50px;
                    height: 50px;
                }
            }
        }
    }
}

.notice {
  border-left: none !important;
  border-right: none !important;
}

.weeeww +.weeeww {
  border-left: 1px solid #DCDCDC;
}

</style>
